<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表白墙</title>

    <style>
        * {
            /*消除浏览器的默认样式*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }
        .row {
            /*开启弹性布局*/
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span {
            width: 100px;
            line-height: 40px;
        }
        .edit {
            width: 200px;
            height: 30px;
        }
        .submit,.revert {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 10px;
        }
        /*点击有反馈*/
        .submit:active,.revert:active{
            background-color: salmon;
        }
    </style>

</head>
<body>
<div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input class="edit" type="text">

    </div>
    <div class="row">
        <span>对谁: </span>
        <input class="edit" type="text">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit">
    </div>
    <br>
    <div class="row">
        <input type="button" value="撤销" class="revert">
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script >
    //实现提交操作,点击提交按钮,就能把用户输入的内容提交到页面上显示
    //点击的时候,获取到三个输入框中的文本内容
    //创建一个新的 div.row ,把内容构造到这个 div 中即可

    let containDiv = document.querySelector('.container');
    let inputs = document.querySelectorAll('.edit');
    let button  = document.querySelector('.submit');

    button.onclick = function (){
        //1.获取到三个输入框的内容
        let from = inputs[0].value;
        let to = inputs[1].value;
        let msg = inputs[2].value;
        if(from == '' || to == ''||msg == ''){
            return;
        }

        //2.构造新 div
        let newDiv = document.createElement('div');
        //给新创建的div 设置 上样式
        newDiv.className = 'row message';
        newDiv.innerHTML =  from+'对'+to+'说'+msg;
        containDiv.appendChild(newDiv);

        //3.清空之前的输入框内容
        for(let input2 of inputs){
            input2.value = '';
        }

        let button2  = document.querySelector('.revert');
        button2.onclick = function (){
        /*    //选中所有的row,找到最后一个row,删除
            let rows  = document.querySelectorAll('.message');
            if(rows.length == null || rows.length == 0){
                return;
            }
            containDiv.removeChild(rows[rows.length -1]);*/
            $ajax({
               type:'delete',
               url:'message',


            });

        }
        //4. [新增] 给服务器发起post请求,把上述数据提交到服务器这边
            //定义一个js对象 ,js中要求对象的key必须是字符串,此处的引号可以省略
            //引号后面是 变量名
        let body = {
            "from":from,
            "to":to,
            "message":msg,
        };

        $.ajax({
            type:'post',
            url:'message',
            data:JSON.stringify(body), //相当于将 js对象 转成 json
            contentType:"application/json;charset=utf8",
            success:function (body){
                console.log(" 数据发布成功")
            }
        });


        //接下啦实现下 读档操作,让浏览器 ajax 发送GET
        //在页面加载的时候,发送 GET请求,从服务器获取到数据并添加到页面中
        $.ajax({
            type: 'get',
            url:'message',
            success:function (body) {
                //此处拿到的body就是一个js的对象数组了
                //本来服务器返回的是一个json格式的字符串,但是 jquery可以帮我们自动识别
                //自动帮我们把 json格式转成js数组对象了
                //接下来遍历这个数据,把元素取出来,构造到页面中即可
                let containDiv = document.querySelector('.container');
                for(let message of body){
                    //针对每个元素构造div
                    let newDiv = document.createElement('div');
                    //给新创建的div 设置 上样式
                    newDiv.className = 'row message';
                    newDiv.innerHTML =  message.from+'对'+message.to+'说'+message.message;
                    containDiv.appendChild(newDiv);
                }
            }
        });

    }
</script>

</body>
</html>